<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增渠道代理商提现')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-payment-add">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">代理商名称：</label>
            <div class="col-sm-8">
                <input type="text" name="agentName" id="agentName" readonly onclick="queryAgent()"
                       placeholder="选择代理商" class="form-control" maxlength="30">
                <i class="fa fa-search" style="margin-top: -22px;margin-right:3px;float:right;"></i>

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">提现代理商：</label>
            <div class="col-sm-8">
                <input name="applyAgentId" id="applyAgentId" readonly class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">渠道：</label>
            <div class="col-sm-8">
                <input name="channelCode" id="channelCode" readonly class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group  ls-balance">
            <label class="col-sm-3 control-label is-required">合作方资金账户余额：</label>
            <div class="col-sm-8  ls-balance">
                <input name="partnerDepositAmount" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group  ls-balance">
            <label class="col-sm-3 control-label is-required">渠道分润账户余额：</label>
            <div class="col-sm-8">
                <input name="profitAccount" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group  ls-balance">
            <label class="col-sm-3 control-label is-required">代收代付账户余额：</label>
            <div class="col-sm-8">
                <input name="depositAmount" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group  ls-balance">
            <label class="col-sm-3 control-label is-required">渠道发票余额：</label>
            <div class="col-sm-8">
                <input name="invoiceRemainAmount" readonly class="form-control" type="text">
            </div>
        </div>


        <div class="form-group kdb-balance">
            <label class="col-sm-3 control-label">KDB分润钱包：</label>
            <div class="col-sm-8">
                <input name="profit" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group kdb-balance">
            <label class="col-sm-3 control-label">KDB流量卡钱包：</label>
            <div class="col-sm-8">
                <input name="flowCard" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group kdb-balance">
            <label class="col-sm-3 control-label">KDB服务费钱包：</label>
            <div class="col-sm-8">
                <input name="serviceFee" readonly class="form-control" type="text">
            </div>
        </div>
        <div class="form-group kdb-balance">
            <label class="col-sm-3 control-label">KDB达标返现：</label>
            <div class="col-sm-8">
                <input name="cashback" readonly class="form-control" type="text">
            </div>
        </div>


        <div class="form-group" id="operationTypeGroup">
            <label class="col-sm-3 control-label">操作类型：</label>
            <div class="col-sm-8">
                <select name="operationType" id="operationType" class="form-control m-b" required>
                    <option value="1">代理商提现</option>
                    <option value="2">代付转账</option>
                </select>
            </div>
        </div>
        <div class="form-group" id="dstAgentIdGroup">
            <label class="col-sm-3 control-label is-required">代付目标账户：</label>
            <div class="col-sm-8">
                <input name="dstAgentId" id="dstAgentId" class="form-control" placeholder="渠道代理商编号" type="text" required>
            </div>
        </div>
        <div class="form-group ls-balance" id="transferModeGroup">
            <label class="col-sm-3 control-label">代付转账场景：</label>
            <div class="col-sm-8">
                <select name="transferMode" class="form-control m-b"
                        th:with="type=${@dict.getType('ls_transfer_mode')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group" id="bankAccountTypeGroup">
            <label class="col-sm-3 control-label">账号类型：</label>
            <div class="col-sm-8">
                <select name="bankAccountType" class="form-control m-b"
                        th:with="type=${@dict.getType('ls_bank_account_type')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group" id="accountTypeGroup">
            <label class="col-sm-3 control-label">账户类型：</label>
            <div class="col-sm-8">
                <select name="accountType" class="form-control m-b" th:with="type=${@dict.getType('ls_account_type')}">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">提现金额：</label>
            <div class="col-sm-8">
                <input name="applyAmount" class="form-control" type="text" required>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "channel/payment"
    $("#form-payment-add").validate({
        focusCleanup: true
    });

    $("input[name='date']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-payment-add').serialize());
        }
    }

    function queryAgent() {
        $.modal.open("选择代理商", ctx + "channel/agent/queryAgentInfo", "1200", "600");
    }

    function safeValue(val) {
        if (val === 0 || val === "0" || val === "0.00" || val === 0.00) {
            return val.toString();
        }
        return val || '';
    }

    function queryWithdraw() {
        var applyAgentId = $("#applyAgentId").val();
        if (!applyAgentId) {
            $.modal.alertError("渠道代理编号为空，无法查询账户信息");
            return;
        }
        $.get(ctx + "channel/payment/queryWithdraw/" + applyAgentId, function (res) {
            if (res.code === 0) {
                var data = res.data || {};
                $("input[name='profitAccount']").val(safeValue(data.profitAccount));
                $("input[name='depositAmount']").val(safeValue(data.depositAmount));
                $("input[name='invoiceRemainAmount']").val(safeValue(data.invoiceRemainAmount));
                $("input[name='partnerDepositAmount']").val(safeValue(data.partnerDepositAmount));
                $("input[name='profit']").val(safeValue(data.profit));
                $("input[name='flowCard']").val(safeValue(data.flowCard));
                $("input[name='serviceFee']").val(safeValue(data.serviceFee));
                $("input[name='cashback']").val(safeValue(data.cashback));

            } else {
                $.modal.alertWarning("查询失败：" + res.msg);
            }
        }).fail(function () {
            $.modal.alertError("网络异常，查询失败");
        });
    }
    function toggleBalanceFields(channelCode) {
        if (channelCode === 'LS') {
            $('.ls-balance').show();
            $('.kdb-balance').hide();
        } else if (channelCode === 'KDB') {
            $('.ls-balance').hide();
            $('.kdb-balance').show();
        } else {
            // 默认隐藏所有
            $('.ls-balance').hide();
            $('.kdb-balance').hide();
        }
    }
    // 监听渠道字段变化
    $('#channelCode').on('change input', function () {
        toggleBalanceFields($(this).val());
    });

    // 初始化页面时根据已有的渠道值切换
    $(document).ready(function () {
        toggleBalanceFields($('#channelCode').val());
    });
    $(document).ready(function () {
        // 初始隐藏
        $('#operationTypeGroup').hide();
        $('#dstAgentIdGroup').hide();
        $('#transferModeGroup').hide();

        // 监听代理商名称字段变化
        $('#agentName').on('input propertychange', function () {
            const agentName = $(this).val();
            if (agentName.includes('系统代理') || agentName.includes('顶级代理')) {
                $('#operationTypeGroup').show();
            } else {
                $('#operationTypeGroup').hide();
                $('#dstAgentIdGroup').hide(); // 同时隐藏代付目标账户
                $('#transferModeGroup').hide();
                $('#bankAccountTypeGroup').show();
                $('#accountTypeGroup').show();
            }
        });

        // 监听操作类型选择变化
        $('#operationType').on('change', function () {
            const operationType = $(this).val();
            const channelCode = $('#channelCode').val();
            if (channelCode === 'KDB') {
                // KDB 渠道：始终显示所有字段
                $('#dstAgentIdGroup').show();
                $('#accountTypeGroup').show();
            } else {
                // LS 渠道：按原来的逻辑来
                if (operationType === '2') {
                    $('#dstAgentIdGroup').show();
                    $('#transferModeGroup').show();
                    $('#bankAccountTypeGroup').hide();
                    $('#accountTypeGroup').hide();
                } else {
                    $('#dstAgentIdGroup').hide();
                    $('#transferModeGroup').hide();
                    $('#bankAccountTypeGroup').show();
                    $('#accountTypeGroup').show();
                }
            }
        });
    });

</script>
</body>
</html>